<template>
  <!-- 联合巡检-巡检结果对比分析-分析结果统计图-折线图 -->
  <div class="inspection-line">
    <div class="top endbox">
      <div class="tabs betweenbox">
        <div
          class="tabs-item centerbox"
          @click="clickEvent(item)"
          v-for="(item,index) in tabsDataList"
          :class="{'tabs-active':item.active}"
          :key="index"
        >{{item.name}}</div>
      </div>
    </div>

    <div class="linechart">
      <v-chart :options="option" :auto-resize="true" @click="chartClick" />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
interface tabItem {
  id: string;
  name: string;
  active: Boolean;
}
interface newEChartOption extends EChartOption {
  series?: any[];
}
@Component
export default class extends Vue {
  @Prop() datas!: any[];
  // tabs数据集合
  tabsDataList: tabItem[] = [
    {
      id: "fzjk",
      name: "机器人巡检",
      active: true,
    },
    {
      id: "zxjc",
      name: "红外巡检",
      active: false,
    },
    {
      id: "jqr",
      name: "摄像头巡检",
      active: false,
    },
  ];
  public option: newEChartOption = {
    color: ["#2CACFB"],
    grid: {
      left: "8%",
      top: "15%",
      bottom: "15%",
      right: "5%",
    },
    tooltip: {
      show: true,
      trigger: "axis",
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          color: "#fff",
        },
        axisLine: {
          lineStyle: {
            color: "#466BC2",
          },
        },
        data: ["12-17", "12-18", "12-19", "12-20", "12-21", "12-22", "12-23"],
      },
    ],
    yAxis: {
      type: "value",
      // name: "单位：亿元",
      nameTextStyle: {
        color: "rgba(154, 169, 195, 1)",
        fontSize: 14,
      },
      axisLabel: {
        color: "#fff",
      },
      axisLine: {
        lineStyle: {
          color: "#466BC2",
        },
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(34, 107, 229, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(34, 107, 229, 0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  public chartClick(val: Object): void {
    // console.log(val);
  }
  @Watch("datas", { immediate: true, deep: true })
  getBarData(newVal: any) {
    // console.log("newVal", newVal);
    var dataName = [];
    var dataVal = [];
    newVal.map((k, j) => {
      if (typeof k.XSJG == "number") {
        dataName.push(k.JHKSSJ);
        dataVal.push(k.XSJG);
      }
    });

    this.option.xAxis[0].data = dataName;
    this.option.series[0].data = dataVal;
  }

  //tab点击
  clickEvent(item: tabItem): void {
    var data = this.datas.filter((o) => o.tjLb === item.name);

    if (data.length < 1) {
      return;
    }
    this.tabsDataList.forEach((v) => {
      v.active = false;
    });
    item.active = true;
  }
}
</script>
<style lang="scss" scoped>
.inspection-line {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 0.32rem;
    box-sizing: border-box;
    margin-top: 0.2rem;
    .tabs {
      width: 3.6rem;
      height: 0.32rem;
      background: url("../../../../assets/img/ParameterManagement/border.png");
      background-size: 100% 100%;
      box-sizing: border-box;
      margin-right: 0.2rem;
      &-item {
        flex: 1;
        box-sizing: border-box;
        cursor: pointer;
        color: #97989c;
        transition: all 800ms;
      }
      &-item:last-child {
        border-right: none;
      }
      &-active {
        color: #fff;
        background: linear-gradient(
          360deg,
          rgba(20, 123, 252, 1) 0%,
          rgba(12, 157, 254, 1) 40%,
          rgba(3, 191, 255, 1) 100%
        );
      }
    }
  }

  .linechart {
    width: 100%;
    height: calc(100% - 0.52rem);
    .echarts {
      width: 100%;
      height: 100%;
      > div {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
